<template>
    <view :style="{ '--color': color }">
        <u-navbar :title="title" :leftIconColor="leftIconColor" @leftClick="leftClick" :bgColor="bgColor" :autoBack="true">
            <view class="leftIcon" slot="left" v-if="fromShare == 1">
                <u-icon name="home" size="20"></u-icon>
            </view>
        </u-navbar>
        <view class="Bannel">
            <image :src="$imgUrls(pageData.merMemo)" mode="aspectFill" class="wh"></image>
            <view class="store">
                <image :src="$imgUrls(pageData.logo)" mode="aspectFill" class="Logo"></image>
                <view class="content">
                    <text class="white size32 bold500 ellipsis">{{ pageData.name }}</text>
                    <text class="white size28 m-top8">{{ pageData.phone }}</text>
                    <view class="row a-center m-top8">
                        <text class="flex-1 ellipsis white size26">{{ pageData.address }}</text>
                        <text class="white size24 p-left20" v-if="pageData.distance">{{ pageData.distance }}</text>
                    </view>
                </view>
            </view>
        </view>

        <view class="rows padding24" v-if="pageData.description">
            <u-parse :content="pageData.description" :domain="domain"></u-parse>
        </view>
        <emptys v-else></emptys>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                fromShare: 0,
                domain: this.imgUrl,
                img: 'https://msraimgcdn.mogoie.com/6164/1751427339414.jpg',
                bgColor: 'transparent',
                leftIconColor: '#fff',
                title: '',
                content: '',
                pageData: '',
                device_code: '01A250609W014'
            };
        },
        onLoad(opt) {
            if (opt.device_code) this.device_code = opt.device_code;
            if (opt.fromShare) this.fromShare = opt.fromShare;
            this.deviceDetail();
        },
        methods: {
            deviceDetail() {
                this.$http
                    .get({
                        url: '/singleSaleItoApi/deviceDetail',
                        data: {
                            device_code: this.device_code
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data;
                        this.pageData = result;
                    });
            },
            leftClick(e) {
                if (this.fromShare == 1) {
                    this.backHome();
                } else {
                    this.$back();
                }
                console.log(e, 'e');
            }
        },
        computed: {
            ...mapState(['color'])
        },
        onPageScroll(e) {
            const scrollTop = e.scrollTop;
            if (scrollTop >= 100) {
                this.bgColor = '#fff';
                this.title = '门店';
            } else {
                this.bgColor = 'transparent';
                this.title = ' ';
            }
            // console.log(e);
        }
    };
</script>

<style lang="scss" scoped>
    .leftIcon {
        padding: 8rpx;
        background-color: #fff;
        border-radius: 50%;
        border: 1px solid #f1f1f1;
    }
    .Bannel {
        width: 100%;
        height: 600rpx;
        position: relative;
        // display: flex;
        // flex-direction: column;
        // justify-content: space-between;
        .store {
            width: 100%;
            height: 250rpx;
            position: absolute;
            bottom: 0;
            left: 0;
            padding: 0 30rpx;
            // background-color: rgba(0, 0, 0, 0.2);
            background: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
            display: flex;
            align-items: center;
            z-index: 100;
            .Logo {
                width: 80rpx;
                height: 80rpx;
                border-radius: 10rpx;
                margin-right: 24rpx;
            }
            .content {
                flex: 1;
                display: flex;
                flex-direction: column;
            }
        }
    }
    // .bgColor{
    // 	background-color: transparent;
    // }
</style>
